{% extends "base.html" %}

{% block content %}
<div class="login-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <div class="card login-card shadow-lg">
                    <div class="card-header text-center bg-primary text-white">
                        <h4 class="mb-0">
                            <i class="bi bi-box-arrow-in-right me-2"></i>用户登录
                        </h4>
                    </div>
                    <div class="card-body p-4">
                        <form id="loginForm" method="POST">
                            <div class="mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-person"></i>
                                    </span>
                                    <input type="text" class="form-control" id="username" name="username" 
                                           placeholder="请输入用户名" required>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="password" class="form-label">密码</label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="bi bi-lock"></i>
                                    </span>
                                    <input type="password" class="form-control" id="password" name="password" 
                                           placeholder="请输入密码" required>
                                    <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                                        <i class="bi bi-eye"></i>
                                    </button>
                                </div>
                            </div>
                            
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="remember_me" name="remember_me">
                                <label class="form-check-label" for="remember_me">
                                    记住我
                                </label>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg" id="loginBtn">
                                    <span class="loading spinner-border spinner-border-sm me-2" role="status"></span>
                                    登录
                                </button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer text-center bg-light">
                        <p class="mb-0">
                            还没有账号？ 
                            <a href="{{ url_for('auth.register') }}" class="text-decoration-none">立即注册</a>
                        </p>
                    </div>
                </div>
                
                <!-- 系统说明 -->
                <div class="card mt-4 login-card">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0">
                            <i class="bi bi-info-circle me-2"></i>系统说明
                        </h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-0">
                            <li><i class="bi bi-check-circle text-success me-2"></i>学生可以注册账号并发送邮件</li>
                            <li><i class="bi bi-check-circle text-success me-2"></i>支持邮件收发和管理功能</li>
                            <li><i class="bi bi-check-circle text-success me-2"></i>管理员拥有完整的系统管理权限</li>
                            <li><i class="bi bi-check-circle text-success me-2"></i>专为教学演示设计的简易邮箱系统</li>
                        </ul>
                    </div>
                </div>
                

            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const loginBtn = document.getElementById('loginBtn');
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    
    // 密码显示/隐藏切换
    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        const icon = this.querySelector('i');
        icon.className = type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
    });
    
    // 表单提交处理
    loginForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            username: formData.get('username').trim(),
            password: formData.get('password'),
            remember_me: formData.get('remember_me') === 'on'
        };
        
        // 基本验证
        if (!data.username || !data.password) {
            showAlert('请输入用户名和密码', 'warning');
            return;
        }
        
        // 显示加载状态
        showLoading(loginBtn, true);
        loginBtn.disabled = true;
        
        try {
            const response = await apiRequest('/auth/login', {
                method: 'POST',
                body: JSON.stringify(data)
            });
            
            if (response.success) {
                showAlert(response.message, 'success');
                
                // 延迟跳转，让用户看到成功消息
                setTimeout(() => {
                    window.location.href = response.redirect || '/';
                }, 1000);
            }
        } catch (error) {
            showAlert(error.message, 'danger');
        } finally {
            showLoading(loginBtn, false);
            loginBtn.disabled = false;
        }
    });
    
    // 回车键提交
    document.addEventListener('keypress', function(e) {
        if (e.key === 'Enter' && !loginBtn.disabled) {
            loginForm.dispatchEvent(new Event('submit'));
        }
    });
});
</script>
{% endblock %}